<template>
    <div class="mainCenter">
        <div class="title">借阅管理</div>
        <div class="mainCenterBox">
            <div class="searchBox">
                <el-form>
                    <el-form-item>
                        <el-input type="text" placeholder="书名/编号/用户名" v-model="value.keyWord"></el-input>
                    </el-form-item>
                    <el-form-item style="margin-left: 20px;">
                        <el-select v-model="value.state">
                            <el-option :value="0" :label="'已归还'"/>
                            <el-option :value="1" :label="'未归还'"/>
                            <el-option :value="2" :label="'逾期'"/>
                            <el-option :value="4" :label="'全部'"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search"><el-icon>
                                <Search />
                            </el-icon>查询</el-button>
                    </el-form-item>
                </el-form>
                <!-- <div class="addInfo">
                    <el-button type="primary" plain @click="bulk" :disabled="!(borrListByBulk.length > 0)"><el-icon>
                            <Setting />
                        </el-icon>批量操作</el-button>
                </div> -->
            </div>
            <el-table style="width: 100%" stripe border :data="borrList"  ref="table">
                <el-table-column label="借阅状态">
                    <template #default="scope">
                        <span v-if="scope.row.state == '0'" style="color: green;">已归还</span>
                        <span v-else-if="scope.row.state == '1'" style="color:#ffcd36 ;">未归还</span>
                        <span v-else-if="scope.row.state == '2'" style="color: red;">逾期</span>
                    </template>
                </el-table-column>
                <el-table-column prop="borrowid" label="借阅编号" />
                <el-table-column prop="uid" label="用户编号" />
                <el-table-column prop="nickname" label="用户昵称" />
                <el-table-column label="书名" prop="bookname" />
                <el-table-column label="开始时间">
                    <template #default="scope">
                                <span>{{ dateFormate(scope.row.starttime).ymdhms}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="结束时间" prop="endTime">
                    <template #default="scope">
                                <span>{{ dateFormate(scope.row.endtime).ymdhms }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="操作">
                    <template #default="scope">
                        <el-button type="primary" plain size="small" @click="editBorr(scope.$index,scope.row)"><el-icon>
                                <EditPen />
                            </el-icon>编辑</el-button>
                        <el-button type="danger" plain size="small" @click="deleteBorrInfo(scope.row)"><el-icon>
                                <Delete />
                            </el-icon>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="total, sizes, prev, pager, next" :page-sizes="[5, 10]" :total="count"
                style="float: right;margin-top: 20px;" v-model:page-size="limit" v-model:current-page="page"
                @size-change="changeLimit" @current-change="jumpPage" />
                
            <el-drawer v-model="isChange" :title="infotite" direction="btt" size="500">
                <Bulk 
                :borrOne="borrOne"
                @emit-reduce="isChecked" @emitchange="isChangeFalse"></Bulk>
            </el-drawer>
        </div>
    </div>
</template>

<script setup lang="ts">
import { BorrowType } from '@/types/borrow';
import Bulk from './components/Bulk.vue'
import { reqDeleteBorrInfo, reqGetBorrList, reqSearchBorrow } from '@/api/common';
import { BorrListElement } from '@/types/reader';
import { elementConfirm, tip } from '@/utils/alert';
import { TableInstance } from 'element-plus';
import { onMounted, reactive, ref, watch } from 'vue';
import dateFormate from '@/utils/dateFormat'

const cidx=ref<number>(-1)
const table = ref<TableInstance>()
const borrList = ref<BorrListElement[]>([])
const infotite=ref<string>('')
const page = ref<number>(1)
const limit = ref<number>(10)
const count = ref<number>(0)
const isChange = ref<boolean>(true)
const borrOne=ref<BorrowType|null>(null)
const isSearch=ref<boolean>(false)
const isChanges = ref<boolean>(true)
// const borrListByBulk = ref<BorrowType[]>([])

const value=reactive({
    keyWord:'',
    state:4
})


const changeLimit = (num: number) => {
    limit.value = num
    getBrroList(page.value, limit.value)
}

const isChecked = (value: BorrListElement) => {
    table.value?.toggleRowSelection(value, false)
}

const search = () => {
    isSearch.value=true
    console.log(value);
    page.value=1
    getSearchList()
    
}

const getSearchList=async()=>{
    let res=await  reqSearchBorrow(value.keyWord,value.state,limit.value,page.value)
    console.log(res.data.data.data);
    borrList.value=res.data.data.data
    count.value=res.data.data.count
    
}
const isChangeFalse = (value: any) => {
    console.log(value)
    borrList.value[cidx.value]=value.info
    isChange.value = value.bool
}

const editBorr=(idx:number,info:BorrowType)=>{
    cidx.value=idx
    infotite.value=info.borrowid+'操作'
    isChange.value = true
    borrOne.value=info
}

const deleteBorrInfo = (info:BorrowType) => {
    elementConfirm().then(() => {
        reqDeleteBorrInfo(info).then(res => {
            tip(res.data.info,"success")
            getBrroList(page.value, limit.value)
        })
    })

}

// const getMore = (value: any) => {
//     borrListByBulk.value = value
// }

const bulk = () => {
    isChange.value = true
    infotite.value='批量操作'
    borrOne.value=null
}
const jumpPage = (pageOne: number) => {
    page.value = pageOne
    getBrroList(page.value, limit.value)
}

const getBrroList = async (page: number, limit: number) => {
    let res = await reqGetBorrList(limit,page)
    borrList.value = res.data.data.data
    count.value = res.data.data.count
}

onMounted(() => {
    isChange.value = false
    getBrroList(page.value, limit.value)
})
</script>

<style scoped lang="scss">
:deep(.el-drawer) {
    border-radius: 5px;
    width: 600px;
    position: absolute;
    left: 50%;
    margin-left: -300px;
    top: 50%;
    margin-top: -250px;
    display: flex;
    justify-content: center;

}

:deep(.el-drawer__header) {
    margin-bottom: 12px;
    ;
}
:deep(.el-drawer__body){
    display: flex;
    justify-content: center;
}
</style>